/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    CCell,  Table, TableBody, TableRow, Text, useTheme,
} from "customize-easy-ui-component";

/**@Deprecated
 * 附页的 图片,
 * 支持多个文件的 字段的 field= _FILE_S示意;  但没有 插入文字说明！
 * */
export function useImagesPage(orc: any, rep:any, title:string, head:string, field:string
) {
    const theme = useTheme();
    const render=(
        <React.Fragment>
            { orc?.[field]?.map(({name,url} : any, i:number) => {
             return <div key={i} css={{"@media print": {pageBreakBefore: 'always',pageBreakInside: 'avoid' } }}>
                    <Text variant="h3" css={{
                        textAlign:'center',
                        "@media (min-width:690px),print and (min-width:538px)": {
                            fontSize: theme.fontSizes[6],
                        }
                    }}>
                      {title}
                    </Text>
                    <div css={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        flexDirection: 'column',
                        [theme.mediaQueries.md]: {
                            flexDirection: 'row',
                        }
                    }}>
                        <Text></Text>
                        <Text  css={{
                            [theme.mediaQueries.md]: {
                                marginRight: '2rem',
                            }
                        }}>
                            报告编号：{rep.isp.no}
                        </Text>
                    </div>
                    <Table  fixed={ ["45%","55%"]  }
                            css={ {borderCollapse: 'collapse', "@media print": {pageBreakInside: 'avoid' } }}  tight miniw={800}>
                      <TableBody>
                          <TableRow>
                              <CCell colSpan={2}>{head}</CCell>
                          </TableRow>
                         <TableRow>
                            <CCell colSpan={2}  css={ {"@media print": { height: '86vh', pageBreakInside: 'avoid'},
                                padding: 0,     //图片最好全屏的
                            } }>
                                <div css={{display: 'flex',justifyContent: 'space-around',alignItems: 'center',
                                }}>
                                    { url &&
                                        <img src={process.env.REACT_APP_OSS_ENDP+url} alt={url}
                                             css={{
                                                 maxHeight: '14cm',   //在这个元素的上一级元素可以自己加一个固定高度值，就像一张纸打印的应该多高的取值。这个用固定高度会导致图片自动的横竖比例不均衡压缩=会变形啊！24cm是纸张大约最多高度=报告最大图片高。
                                                 maxWidth: '-webkit-fill-available',
                                                 [theme.mediaQueries.lg]: {maxHeight: '18cm', maxWidth: undefined},           //普通图片+大屏幕限制高度才是关键的。
                                                 //【很容易超过限制！！】A4纸规格21cm×29.7cm，扣除页眉页脚再扣除 tr td以及高度方向上的其它DOM：标题高度，其它tr行高。
                                                 //打印css：需要在<td>上加height: 86vh盛满整张纸张后，能保证图片正常打印。 打印时: 小图片不会主动放大的。
                                                 "@media print": {maxHeight: '86vh', maxWidth: '100%'},        //对A4纸张竖版的高度26cm基本都是图片整张纸，这里没考虑多个图片在宽度方向上的并排布局：可用软件合并。
                                             }}
                                        />
                                    }
                                </div>
                            </CCell>
                         </TableRow>
                      </TableBody>
                    </Table>
                </div>
            }) }
        </React.Fragment>
    );
  return [ render ];
}

